<style lang="less">
    .demo-circle-custom {
        & h1 {
            color: #3f414d;
            font-size: 28px;
            font-weight: normal;
        }
        & p {
            color: #657180;
            font-size: 14px;
            margin: 10px 0 15px;
        }
        & span {
            display: block;
            padding-top: 15px;
            color: #657180;
            font-size: 14px;
            &:before {
                content: '';
                display: block;
                width: 50px;
                height: 1px;
                margin: 0 auto;
                background: #e0e3e6;
                position: relative;
                top: -15px;
            }
        ;
        }
        & span i {
            font-style: normal;
            color: #3f414d;
        }
    }
</style>
<template>
    <div>

        <!--<Circle-->
        <!--:size="250"-->
        <!--:trail-width="4"-->
        <!--:stroke-width="5"-->
        <!--:percent="75"-->
        <!--stroke-linecap="square"-->
        <!--stroke-color="#43a3fb">-->
        <!--<div class="demo-circle-custom">-->
        <!--&lt;!&ndash;<h1>{{ // 42001776 | currency '' 0 }}</h1>&ndash;&gt;-->
        <!--<p>消费人群规模</p>-->
        <!--<span>-->
        <!--总占人数-->
        <!--<i>75%</i>-->
        <!--</span>-->
        <!--</div>-->
        <!--</Circle>-->
        <template v-if="id && id  > 0 ">
            <Button type="error" size="large" @click="setIsShow =true" style="margin-bottom: 20px">设置满编人数</Button>
            <Button type="warning" size="large"  style="margin-bottom: 20px">人数:{{peopleNum}}</Button>
            <Progress :percent="peopleRate" :stroke-width="15"></Progress>
            <!--<Circle :percent="80">-->
            <!--<span class="demo-circle-inner" style="font-size:24px">80%</span>-->
            <!--</Circle>-->
            <Modal v-model="setIsShow" title="满编人数" @on-ok="handleSubmit('formValidate')"
                   @on-cancel="setIsShow =false">
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                    <Form-item label="人数" prop="count">
                        <Input v-model="formValidate.count" placeholder="请输入满编人数"></Input>
                    </Form-item>
                </Form>
            </Modal>
        </template>
        <template>
            <Progress :percent="peopleRate" :stroke-width="15"></Progress>
        </template>
    </div>

</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                //设置满编人数
                setIsShow: false,
                userId: '',
                formValidate: {
                    count: '',
                },
                ruleValidate: {},
                peopleNum:'',
                peopleRate:'',
                id:'',
            }
        },
        mounted: function () {

            if(this.$route.query.id && this.$route.query.id > 0){
                this.id =this.$route.query.id;
                this.getDetail();

            }else {
                this.getData();
            }
        },
        methods: {
            handleSubmit(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.comfirmModifyPS(model);
                })
            },
            comfirmModifyPS: function (model) {
                let that = this;
                let params = that.$qs.stringify(model);
                apiUtil.post(that, apiUtil.urls.setCofigTspc, params, function (res) {
                });
            },
            getData: function () {
                let that = this;

                let para = {
                    // uplevelid: ''
                };

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.OrgTotalFillPeopleRate, para, function (res) {
                    that.peopleRate = res.Msg;
                });

                apiUtil.get(that, apiUtil.urls.ConfigTspc, para, function (res) {
                    that.peopleNum = res.Msg;
                });

            },
            getDetail:function () {
                let that = this;

                let para = {
                    id: that.$route.query.id
                };

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.OrgFillPeopleRate, para, function (res) {
                    that.peopleRate = res.Msg;
                });

            }

        }
    }
</script>
